import 'package:flutter/material.dart';
import 'package:xview/components/xButton.dart';
import 'package:xview/components/xNavbar.dart';
import 'package:xview/utils/dimension.dart';

class button extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _buttonState();
  }
}

class _buttonState extends State<button> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: XNavbar(
        title: '按钮'
      ).render(context),
      body: ListView(
        children: [
          Container(
            width: Dimension(context).toPx(345),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                renderView_base(),
                renderView_plain(),
                renderView_disable(),
                renderView_loading(),
              ],
            ),
          )
        ],
      )
    );
  }

  renderView_base(){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.symmetric(vertical: Dimension(context).toPx(10),horizontal: Dimension(context).toPx(15)),
          child: Text('按钮类型',style: TextStyle(color: Color(0xff909193),fontSize: Dimension(context).toPx(15))),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: Dimension(context).toPx(15)),
          child: Wrap(
            spacing: 30,
            runSpacing: 15,
            children: [
              XButton(title: '默认按钮',type: 'default'),
              XButton(title: '主要按钮'),
              XButton(title: '成功按钮',type: 'success'),
              XButton(title: '警告按钮',type: 'warning'),
              XButton(title: '危险按钮',type: 'error'),
            ],
          ),
        )
      ],
    );
  }

  renderView_plain(){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.symmetric(vertical: Dimension(context).toPx(10),horizontal: Dimension(context).toPx(15)),
          child: Text('镂空按钮',style: TextStyle(color: Color(0xff909193),fontSize: Dimension(context).toPx(15))),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: Dimension(context).toPx(15)),
          child: Wrap(
            spacing: 30,
            runSpacing: 15,
            children: [
              XButton(title: '默认按钮',type: 'default',plain: true),
              XButton(title: '主要按钮',plain: true),
              XButton(title: '成功按钮',type: 'success',plain: true),
              XButton(title: '警告按钮',type: 'warning',plain: true),
              XButton(title: '危险按钮',type: 'error',plain: true),
            ],
          ),
        )
      ],
    );
  }

  renderView_disable(){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.symmetric(vertical: Dimension(context).toPx(10),horizontal: Dimension(context).toPx(15)),
          child: Text('禁用按钮',style: TextStyle(color: Color(0xff909193),fontSize: Dimension(context).toPx(15))),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: Dimension(context).toPx(15)),
          child: Wrap(
            spacing: 30,
            runSpacing: 15,
            children: [
              XButton(title: '主要按钮',disabled: true),
              XButton(title: '成功按钮',type: 'success',disabled: true),
              XButton(title: '警告按钮',type: 'warning',disabled: true),
              XButton(title: '危险按钮',type: 'error',disabled: true),
            ],
          ),
        )
      ],
    );
  }

  renderView_loading(){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.symmetric(vertical: Dimension(context).toPx(10),horizontal: Dimension(context).toPx(15)),
          child: Text('加载按钮',style: TextStyle(color: Color(0xff909193),fontSize: Dimension(context).toPx(15))),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: Dimension(context).toPx(15)),
          child: Wrap(
            spacing: 30,
            runSpacing: 15,
            children: [
              XButton(title: '主要按钮',loading: true,loadingMod: 'circle'),
              XButton(title: '主要按钮',loading: true,loadingMod: 'spinner'),
            ],
          ),
        )
      ],
    );
  }
}
